.xixi{
  width: min-content;
}
.group{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  >div{
    width: 100%;
    height: 100%;
    line-height: 100px;
  }
}
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}


#list{
  border: 1px solid yellow;
  margin: 50px;
  width:100%;
  height: 100px;
  display: flex;
  div{
    width: 100px;
    height: 100px;
    line-height: 100px;
    font-size: 50px;
  }
}
.list-move,
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(-100px);
}
.list-leave-active {
  position: absolute;
}


#testts {
  width: 100%;
  background-color: aqua;
  transition: background-color 2s ease;
}
#testts:hover{
  // width: 800px;
  // transform: rotate(720deg) scale(2);
  background-color: black;
}